<template>
    <el-dialog
            :visible.sync="dialogVisible"
            width="800px"
            :before-close="closeDialog"
            append-to-body
            title="添加接口"
    >
    
    
        <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">

          <el-form-item prop="interName" label="接口名称">
            <el-input size= "small" type="text"  placeholder="请输入接口名称"  v-model="form.interName"></el-input>
          </el-form-item>

          <el-form-item prop="interType" label="接口类型">
            <el-select v-model="form.interType" placeholder="请选择" @change="interTypeChange">
              <el-option
                  v-for="item in interTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="codeValue" label="回调接口" v-if="form.interType === 'CODE'">
            <el-select v-model="form.codeValue" placeholder="请选择">
              <el-option
                  v-for="item in codeInterList"
                  :key="item.value"
                  :label="item.description"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="url" label="URL" v-if="form.interType === 'HTTP'">
                <el-input size= "small" type="text"  placeholder="请输入URL"  v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item prop="requestMethod" label="请求方法" v-if="form.interType === 'HTTP'">
            <el-select v-model="form.requestMethod" placeholder="请选择">
              <el-option
                  v-for="item in requestMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="contentType" label="请求参数" v-if="form.interType === 'HTTP'">
            <el-select v-model="form.contentType" placeholder="请选择">
              <el-option
                  v-for="item in contentTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="exchange" label="交换器" v-if="form.interType === 'MQ'">
            <el-input size= "small" type="text"  v-model="form.exchange"></el-input>
          </el-form-item>
          <el-form-item prop="routingKey" label="路由键" v-if="form.interType === 'MQ'">
            <el-input size= "small" type="text"  v-model="form.routingKey"></el-input>
          </el-form-item>
          <el-form-item prop="param" label="参数" v-if="form.interType === 'MQ'">
            <el-input size= "small" type="textarea"  v-model="form.param"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input size= "small" type="textarea"  v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-group">
            <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
            <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
        </div>

    </el-dialog>

</template>

<script>

    import {addInterfaceConfig,getCodeInterList} from '@/api/workflowInterface'
    export default {
        data(){
            return {
                labelPosition:'left',
                dialogVisible: false,
                loading: false,
                form: this.defaultForm(),
                interTypes:[
                  {
                    value: 'HTTP',
                    label: 'http接口'
                  },
                  {
                    value: 'MQ',
                    label: 'mq接口'
                  },
                  {
                    value: 'CODE',
                    label: '系统接口'
                  }
                ],
                contentTypes:[
                  {
                    value: 'application/json',
                    label: 'application/json'
                  },
                  {
                    value: 'application/x-www-form-urlencoded',
                    label: 'application/x-www-form-urlencoded'
                  }
                ],
                requestMethods:[
                  {
                    value: 'GET',
                    label: 'GET'
                  },
                  {
                    value: 'POST',
                    label: 'POST'
                  },
                  {
                    value: 'PUT',
                    label: 'PUT'
                  }
                ],
                codeInterList:[],
            }
        },
        created(){
           this.queryCodeInterList();
        },
        methods:{
            async queryCodeInterList(){
               let ret = await getCodeInterList();
               this.codeInterList = ret.data;
            },
            defaultForm(){
              return {
                id:"",
                classId:"",
                interId:"",
                interType:"",
                interName:"",
                url:"",
                requestMethod:"",
                contentType:"",
                exchange:"",
                routingKey:"",
                codeValue:"",
                param:"",
                desc:""
              };
            },
            interTypeChange(row){

            },
            showDialog(row){
                this.form = this.defaultForm();
                this.form.classId = row.classId;
                this.dialogVisible = true
            },
            closeDialog(){
                this.form = {};
                this.dialogVisible = false
                this.loading = false
            },
            submit(){
                this.$refs.form.validate(async valid => {
                    if(valid){
                        try{
                            this.loading = true
                            let res = await addInterfaceConfig(this.form);
                            if(res.status === '200'){
                                this.$message.success('添加成功')
                                this.closeDialog()
                                this.$emit('success')
                            }else{
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }catch{
                            this.loading = false
                        }
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .btn-group{
        display: flex;
        justify-content: right;
        .el-button{
            width: 50px;
        }
    }
    .el-form-item{
        height: 40px;
    }
</style>